<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas考试</title>
</head>
<style>
    .wrapper{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<body>

    <div class="wrapper">
        <div class="item">
            <div>第一题</div>
            <canvas id="canvas-1" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第二题</div>
            <canvas id="canvas-2" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第三题</div>
            <canvas id="canvas-3" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第四题</div>
            <canvas id="canvas-4" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <button type="button" class="mui-btn"  id="big">放大</button>
        </div>
        <div class="item">
            <div>第五题</div>
            <canvas id="canvas-5" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <div>
               <input type="button" value="红"  id="red">
               <input type="button" value="蓝"  id="blue">
               <input type="button" value="黄"  id="yellow">
               <input type="button" value="下载"  id="download">
            </div>
        </div>
        <div class="item">
            <div>第六题</div>
            <canvas id="canvas-6" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
    </div>
    
</body>
<script>
    window.onload = function() {
    	var canvas=document.getElementById("canvas-1");
    	var ctx=canvas.getContext("2d");
    	ctx.beginPath();
    	ctx.arc(100,200,40,0,2*Math.PI)
    	ctx.stroke()
    	ctx.fillStyle="red";
    	ctx.fill();
        ctx.stroke()
        
        
        ctx.beginPath();
        ctx.fillRect(180,180,100,50);
        ctx.stroke()
        ctx.fillStyle="red";
        ctx.fill();
        ctx.stroke()
        
        
        ctx.moveTo(40,20);
        ctx.lineTo(160,20);
        ctx.arcTo(180,20,180,40,20);
        ctx.moveTo(180,40);
        ctx.lineTo(180,110);
        ctx.arcTo(180,130,160,130,20);
        ctx.moveTo(160,130);
        ctx.lineTo(40,130);
        ctx.arcTo(20,130,20,110,20);
        ctx.moveTo(20,110);
        ctx.lineTo(20,40);
        ctx.arcTo(20,20,40,20,20);
        ctx.stroke();
        
        
        
        
        
        var canvas=document.getElementById("canvas-2");
    	var ctx=canvas.getContext("2d");
    	ctx.beginPath();
    	ctx.arc(100,150,40,0,2*Math.PI)
    	ctx.stroke()
    	
    	
    	ctx.beginPath();
        ctx.strokeRect(180,120,100,50);
        ctx.stroke()
        
         ctx.beginPath();
         ctx.moveTo(50,100);
         ctx.lineTo(150,50);
         ctx.lineTo(150,100);
         ctx.lineTo(50,100);
         ctx.stroke();

        
        
        var canvas=document.getElementById("canvas-3");
    	var ctx=canvas.getContext("2d");
    	var angle = 10;

        setInterval(function(){

            ctx.clearRect(0,0,canvas.width,canvas.height);

            ctx.save();

            ctx.beginPath();

            ctx.translate(180,150);

            ctx.rotate(angle*Math.PI/180)
            ctx.fillStyle = 'red'

            ctx.fillRect(-100,-50,200,100)

            ctx.restore();

            angle++
        draw(everyPer);
        },30)
        
        
        
        
    var canvas=document.getElementById("canvas-4");
    var a=canvas.getContext("2d");
    let scalex=1.5;
    let scaley=1.5;
    let x=100
    y=100
     width=40
     height=20;
     a.fillRect(x,y,width,height);
     let fd=document.getElementById("big");
     fd.onclick=function(){
     	a.fillStyle="black";
     	a.translate((x+width/2)*(1-scalex),(y+height/2)*(1-scaley));
     	a.scale(scalex,scaley);
     	a.fillRect(x,y,width,height);
     }
    




        var canvas=document.getElementById("canvas-5");
        console.dir(canvas);
        var d=canvas.getContext("2d");
        
        let se=document.getElementById("red");
        se.onclick=function(){d.clearRect(0,0,canvas.width,canvas.height);d.strokeStyle = "red";}
    let startX=0,
       startY=0,
       isMove=true,
       nowX=0,
       nowY=0;
   let lastX=0,
       lastY=0;
      document.onmousemove=function(e){
       nowX=(e.pageX-Canvas.offsetLeft);
       nowY=(e.pageY-Canvas.offsetTop);
       if(isMove){
         d.lineTo(nowX,nowY);
         d.stroke();
       }
      }
      document.onmouseup=function(e){
       isMove=false;
      }
      document.onmousedown=function(e){
       startX=(e.pageX-Canvas.offsetLeft);
       startY=(e.pageY-Canvas.offsetTop);
       isMove=true;
       d.moveTo(startX,startY);
       lastX=0;
       lastY=0;
      }


        
    }
</script>
</html>